<template>
	<view class="">
		<scroll-view scroll-x="true" style="width: 100vw;">
			<view  class="tabs">
				<view class="tab" v-for="(category,index) in common.modulesData.categoryModules" :key="category.id" 
				:class="{'active': activeCategory === index}" @click="clickCategory(category,index)">
					{{category.name}}
				</view>
			</view>
		</scroll-view>
		<view class="goods-list">
			<view class="goods" v-for="goods in goodsList" :key="goods.id" @tap="toDetail(goods.id)">
				<view class="img">
					<image :src="$wanlshop.oss(goods.image, 100, 100)" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="title">
						{{goods.title}}
					</view>
					<view class="">
						<view class="price">
							<view class="z_price">
								￥{{goods.oneprice}}
							</view>
							<view class="y_price">
								￥{{goods.price}}
							</view>
						</view>
						<view class="number">
							已拼{{goods.sales || 0}}件
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {
				activeCategory:0,
				pageNo:0,
				status:'more', //more/loading/noMore
				goodsList:[]
			}
		},
		computed: {
			...mapState(['common', 'user', 'update'])
		},
		watch:{
			'common.modulesData.categoryModules'(newVal, oldVal) {
				console.log('最新值是：'+newVal,"原来的值是："+ oldVal);
				if(newVal.length > this.activeCategory){
					this.getGoodsList(this.common.modulesData.categoryModules[this.activeCategory].id, true)
				}
			}
		},
		onShow() {
			console.log(this.common.modulesData)
			this.activeCategory = 0
			if(this.common.modulesData.categoryModules.length > this.activeCategory){
				this.getGoodsList(this.common.modulesData.categoryModules[this.activeCategory].id, true)
			}
		},
		methods: {
			clickCategory(category,index){
				if(this.index != this.activeCategory){
					this.activeCategory = index
					// 请求商品列表
					this.getGoodsList(category.id, true)
				}
			},
			getGoodsList(id,flag = false){
				if(flag) {
					this.pageNo = 0;
					this.goodsList = []
				}
				this.status = 'loading'
				this.pageNo++
				uni.request({
					url: '/wanlshop/onepoint/category',
					method: 'get',
					data:{
						id,page:this.pageNo
					},
					success: res => {
						this.goodsList.push(...res.data.goods.data)
						console.log(this.pageNo , res.data.goods.last_page);
						if(this.pageNo >= res.data.goods.last_page) {
							this.status = 'noMore'
						}else {
							this.status = 'more'
						}
					}
				});
			},
			toDetail(id){
				uni.navigateTo({
					url: `/pages/yifengou/yifengou?id=${id}`
				})
			}
		}
	}
</script>

<style scoped>
	.tabs {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 36rpx;
		white-space: nowrap;
		width: auto;
	}
	.tabs .tab {
		padding: 16rpx;
		min-width: 116rpx;
		text-align: center;
		display: inline-block;
		position: relative;
	}
	.tabs .tab.active {
		font-weight: 500;
		font-size: 32rpx;
		color: #FC5351;
	}
	.tabs .active::after {
		content:'';
		width: 28rpx;
		height: 6rpx;
		background: #FC5351;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.goods-list {
		padding: 20rpx 32rpx;
	}
	.goods {
		display: flex;
		gap: 40rpx;
		margin-bottom: 40rpx;
	}
	.goods .img {
		width: 220rpx;
		height: 220rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		background-color: aqua;
	}
	.goods .info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.goods .info .title {
		overflow: hidden; /* 隐藏超出部分内容 */
		display: -webkit-box; /* 必须设置display为-webkit-box才能生效 */
		-webkit-line-clamp: 2; /* 指定显示的行数 */
		-webkit-box-orient: vertical; /* 设置子元素垂直排列 */
		text-overflow: ellipsis; /* 当文字溢出时显示省略号 */
		white-space: pre-wrap; /* 保持换行符不被合并 */
		
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
	}
	.goods .info .price {
		display: flex;
		align-items: baseline;
		gap: 6rpx;
	}
	.goods .info .price .z_price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #EB5A45;
	}
	.goods .info .price .y_price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-decoration-line: line-through;
	}
	.goods .info .number {
		margin-top: 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
	}
</style>